<template>
  <div class="demo-page">
    <div class="demo-header">
      <h1>🔐 SliderVerify 滑块验证组件演示</h1>
      <p>功能强大的Vue 3滑块验证组件，支持防机器人检测、多种自定义插槽、震动和声音反馈</p>
    </div>

    <div class="demo-grid">
      <!-- 1. 基础滑块验证 -->
      <div class="demo-section">
        <h3>🎯 基础滑块验证</h3>
        <SliderVerify 
          ref="basicSliderRef"
          @success="() => addLog('基础验证', '验证成功', 'success')"
          @fail="() => addLog('基础验证', '验证失败', 'error')"
          @change="(progress) => addLog('基础验证', `进度: ${Math.round(progress)}%`, 'info')"
        />
      </div>

      <!-- 2. 带头部和底部信息的滑块 -->
      <div class="demo-section">
        <h3>📋 完整信息展示</h3>
        <SliderVerify 
          ref="fullInfoSliderRef"
          :show-progress="true"
          :show-help="true"
          @success="() => addLog('完整信息', '验证成功', 'success')"
          @fail="() => addLog('完整信息', '验证失败', 'error')"
          @bot-detected="(reason) => addLog('完整信息', `机器人检测: ${reason}`, 'warning')"
        >
          <!-- 头部插槽 -->
          <template #header>
            <div class="verification-header">
              <h4>🛡️ 安全验证中心</h4>
              <p>为保护您的账户安全，请完成身份验证</p>
            </div>
          </template>

          <!-- 自定义图标 -->
          <template #icon="{ isSuccess, isDragging, isDisabled }">
            <i v-if="isSuccess" class="icon success-icon">✓</i>
            <i v-else-if="isDragging" class="icon dragging-icon">⟳</i>
            <i v-else-if="isDisabled" class="icon disabled-icon">✗</i>
            <i v-else class="icon default-icon">→</i>
          </template>

          <!-- 进度条内容 -->
          <template #progress-content="{ progress, isSuccess }">
            <div class="progress-indicator">
              <span v-if="!isSuccess" class="progress-text">{{ Math.round(progress) }}%</span>
              <span v-else class="success-text">✓ 完成</span>
            </div>
          </template>

          <!-- 底部信息 -->
          <template #footer="{ progress, isSuccess, isDragging, botDetected, retryCount }">
            <div class="verification-footer">
              <div class="status-info">
                <div class="status-dot" :class="getStatusClass(isSuccess, botDetected, isDragging)"></div>
                <span class="status-text">{{ getStatusText(isSuccess, botDetected, isDragging) }}</span>
              </div>
              <div class="stats-info">
                <span>进度: {{ Math.round(progress) }}%</span>
                <span v-if="retryCount > 0">重试: {{ retryCount }}</span>
              </div>
            </div>
          </template>

          <!-- 帮助信息 -->
          <template #help="{ botDetected, isSuccess }">
            <div class="help-section">
              <div v-if="botDetected" class="help-warning">
                <i class="help-icon">🤖</i>
                <div class="help-content">
                  <strong>检测到异常操作</strong>
                  <p>请以自然的速度拖动滑块，就像平时使用手机一样</p>
                </div>
              </div>
              <div v-else-if="isSuccess" class="help-success">
                <i class="help-icon">🎉</i>
                <div class="help-content">
                  <strong>验证成功！</strong>
                  <p>您已通过安全验证，可以继续操作</p>
                </div>
              </div>
              <div v-else class="help-normal">
                <i class="help-icon">💡</i>
                <div class="help-content">
                  <strong>操作提示</strong>
                  <p>请拖动滑块到最右端完成身份验证</p>
                </div>
              </div>
            </div>
          </template>
        </SliderVerify>
      </div>

      <!-- 3. 渐变警告样式 -->
      <div class="demo-section">
        <h3>🌈 渐变警告样式</h3>
        <SliderVerify 
          ref="gradientSliderRef"
          :enable-bot-detection="true"
          :min-drag-time="200"
          :min-track-points="15"
          :allowed-retries="2"
          progress-color="linear-gradient(90deg, #ff6b6b 0%, #ffa500 100%)"
          success-color="linear-gradient(90deg, #51cf66 0%, #40c057 100%)"
          @success="() => addLog('渐变样式', '验证成功', 'success')"
          @bot-detected="(reason) => addLog('渐变样式', `机器人检测: ${reason}`, 'warning')"
        >
          <template #bot-warning="{ reason, retryCount, maxRetries, remainingRetries }">
            <div class="gradient-warning">
              <div class="warning-icon">⚠️</div>
              <div class="warning-content">
                <div class="warning-title">安全验证失败</div>
                <div class="warning-detail">
                  <p>检测原因：{{ getReasonText(reason) }}</p>
                  <p>重试次数：{{ retryCount }}/{{ maxRetries }} (剩余 {{ remainingRetries }} 次)</p>
                </div>
              </div>
            </div>
          </template>
        </SliderVerify>
      </div>

      <!-- 4. 高级卡片样式 -->
      <div class="demo-section">
        <h3>💎 高级卡片样式</h3>
        <SliderVerify 
          ref="premiumSliderRef"
          :enable-bot-detection="true"
          :min-drag-time="300"
          :vibration-feedback="true"
          progress-color="linear-gradient(90deg, #667eea 0%, #764ba2 100%)"
          success-color="linear-gradient(90deg, #11998e 0%, #38ef7d 100%)"
          @success="() => addLog('高级样式', '验证成功', 'success')"
          @bot-detected="(reason, data) => addLog('高级样式', `机器人检测: ${reason} (置信度: ${Math.round(data.confidence * 100)}%)`, 'warning')"
        >
          <template #track-decoration="{ progress }">
            <div class="track-decoration" :style="{ opacity: progress / 100 }">
              <div class="decoration-dots">
                <div v-for="i in 8" :key="i" class="decoration-dot" :class="{ active: progress >= i * 12.5 }"></div>
              </div>
            </div>
          </template>

          <template #bot-warning="{ reason, retryCount, maxRetries, remainingRetries, detectionData }">
            <div class="premium-warning">
              <div class="warning-animation">
                <div class="pulse-circle"></div>
                <div class="warning-icon">🛡️</div>
              </div>
              <div class="warning-content">
                <div class="warning-title">安全检测异常</div>
                <div class="warning-details">
                  <div class="detail-row">
                    <span class="label">检测原因：</span>
                    <span class="value">{{ getReasonText(reason) }}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">重试情况：</span>
                    <span class="value">{{ retryCount }}/{{ maxRetries }} (剩余{{ remainingRetries }}次)</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">检测置信度：</span>
                    <span class="value">{{ Math.round(detectionData.confidence * 100) }}%</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">轨迹点数：</span>
                    <span class="value">{{ detectionData.trackPoints }}</span>
                  </div>
                </div>
                <div class="warning-tip">
                  <small>💡 请以正常速度拖动滑块，避免过快或异常操作</small>
                </div>
              </div>
              <div class="warning-progress">
                <div class="progress-track">
                  <div 
                    class="progress-fill" 
                    :style="{ width: (retryCount / maxRetries) * 100 + '%' }"
                  ></div>
                </div>
              </div>
            </div>
          </template>
        </SliderVerify>
      </div>

      <!-- 5. 简洁卡片样式 -->
      <div class="demo-section">
        <h3>🎨 简洁卡片样式</h3>
        <SliderVerify 
          ref="cardSliderRef"
          :enable-bot-detection="true"
          :min-track-points="12"
          :allowed-retries="3"
          track-color="#f8f9fa"
          progress-color="linear-gradient(90deg, #20bf6b 0%, #01a3a4 100%)"
          @success="() => addLog('简洁样式', '验证成功', 'success')"
          @bot-detected="(reason) => addLog('简洁样式', `机器人检测: ${reason}`, 'warning')"
        >
          <template #default>
            <span class="custom-text">👆 向右滑动完成验证</span>
          </template>

          <template #success>
            <span class="custom-success">🎉 验证通过！</span>
          </template>

          <template #bot-warning="{ reason, retryCount, maxRetries, remainingRetries }">
            <div class="card-warning">
              <div class="warning-left">
                <div class="warning-icon">⚠️</div>
              </div>
              <div class="warning-right">
                <div class="warning-title">验证异常</div>
                <div class="warning-desc">{{ getReasonText(reason) }}</div>
                <div class="warning-meta">
                  <span>重试: {{ retryCount }}/{{ maxRetries }}</span>
                  <span>剩余: {{ remainingRetries }}次</span>
                </div>
              </div>
            </div>
          </template>
        </SliderVerify>
      </div>

      <!-- 6. 自定义装饰样式 -->
      <div class="demo-section">
        <h3>✨ 自定义装饰样式</h3>
        <SliderVerify 
          ref="decoratedSliderRef"
          :width="350"
          :height="48"
          :threshold="85"
          progress-color="linear-gradient(90deg, #fa709a 0%, #fee140 100%)"
          success-color="linear-gradient(90deg, #a8edea 0%, #fed6e3 100%)"
          @success="() => addLog('装饰样式', '验证成功', 'success')"
          @change="(progress) => addLog('装饰样式', `进度更新: ${Math.round(progress)}%`, 'info')"
        >
          <template #header>
            <div class="decorated-header">
              <div class="header-title">🎨 创意验证</div>
              <div class="header-subtitle">展示自定义装饰效果</div>
            </div>
          </template>

          <template #track-decoration="{ progress, isSuccess }">
            <div class="track-markers">
              <div 
                v-for="i in 6" 
                :key="i" 
                class="marker"
                :class="{ 
                  active: progress >= (i - 1) * 20,
                  completed: isSuccess && progress >= (i - 1) * 20
                }"
                :style="{ left: `${(i - 1) * 20}%` }"
              >
                <div class="marker-dot"></div>
                <div class="marker-label">{{ (i - 1) * 20 }}%</div>
              </div>
            </div>
          </template>

          <template #progress-content="{ progress, isSuccess }">
            <div class="decorated-progress">
              <div class="progress-waves">
                <div class="wave" :style="{ animationDelay: '0s' }"></div>
                <div class="wave" :style="{ animationDelay: '0.5s' }"></div>
                <div class="wave" :style="{ animationDelay: '1s' }"></div>
              </div>
              <div class="progress-text">
                <span v-if="!isSuccess">{{ Math.round(progress) }}%</span>
                <span v-else class="success-emoji">🎊</span>
              </div>
            </div>
          </template>

          <template #icon="{ isSuccess, isDragging }">
            <div class="custom-icon">
              <div v-if="isSuccess" class="icon-success">✨</div>
              <div v-else-if="isDragging" class="icon-dragging">🔄</div>
              <div v-else class="icon-default">👆</div>
            </div>
          </template>
        </SliderVerify>
      </div>
    </div>

    <!-- 控制面板 -->
    <div class="control-panel">
      <h3>🎮 控制面板</h3>
      <div class="control-buttons">
        <button @click="resetAll" class="btn btn-primary">🔄 重置所有</button>
        <button @click="simulateBotDetection" class="btn btn-warning">🤖 模拟检测</button>
        <button @click="getAllData" class="btn btn-info">📊 获取数据</button>
        <button @click="clearLogs" class="btn btn-secondary">🗑️ 清空日志</button>
      </div>
    </div>

    <!-- 操作日志 -->
    <div class="log-panel">
      <h3>📋 操作日志</h3>
      <div class="log-container">
        <div 
          v-for="(log, index) in logs" 
          :key="index" 
          class="log-item"
          :class="log.type"
        >
          <span class="log-time">{{ log.time }}</span>
          <span class="log-source">[{{ log.source }}]</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
        <div v-if="logs.length === 0" class="log-empty">
          暂无操作日志
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import SliderVerify from '@/components/SliderVerify/index.vue'

// 组件引用
const basicSliderRef = ref()
const fullInfoSliderRef = ref()
const gradientSliderRef = ref()
const premiumSliderRef = ref()
const cardSliderRef = ref()
const decoratedSliderRef = ref()

// 日志系统
const logs = ref([])

// 添加日志
const addLog = (source, message, type = 'info') => {
  const now = new Date()
  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
  
  logs.value.unshift({
    time,
    source,
    message,
    type
  })
  
  // 保持最多100条日志
  if (logs.value.length > 100) {
    logs.value.splice(100)
  }
}

// 状态相关方法
const getStatusClass = (isSuccess, botDetected, isDragging) => {
  if (isSuccess) return 'success'
  if (botDetected) return 'warning'
  if (isDragging) return 'dragging'
  return 'normal'
}

const getStatusText = (isSuccess, botDetected, isDragging) => {
  if (isSuccess) return '验证成功'
  if (botDetected) return '异常检测'
  if (isDragging) return '验证中...'
  return '等待验证'
}

const getReasonText = (reason) => {
  const reasonMap = {
    '拖拽时间过短': '拖拽速度过快，疑似自动化操作',
    '拖拽时间过长': '拖拽时间异常，请重新尝试',
    '轨迹点数过少': '移动轨迹异常，缺少正常的轨迹点',
    '移动轨迹过于完美': '移动路径过于完美，疑似程序操作',
    '移动速度过于均匀': '移动速度异常均匀，不符合人类行为',
    '响应时间过快': '响应速度过快，缺少正常的思考时间',
    '重试次数过多': '重试次数超限，请稍后再试',
    '检测到机器人加速模式': '检测到自动化操作特征',
    '鼠标移动模式异常': '鼠标移动模式不符合正常人类行为'
  }
  return reasonMap[reason] || reason
}

// 控制方法
const resetAll = () => {
  const sliders = [
    basicSliderRef.value,
    fullInfoSliderRef.value,
    gradientSliderRef.value,
    premiumSliderRef.value,
    cardSliderRef.value,
    decoratedSliderRef.value
  ]
  
  sliders.forEach(slider => {
    if (slider) {
      slider.reset()
    }
  })
  
  addLog('系统', '所有滑块已重置', 'info')
}

const simulateBotDetection = () => {
  const slider = gradientSliderRef.value
  if (slider) {
    // 模拟触发机器人检测（这里需要组件支持模拟方法）
    addLog('系统', '模拟机器人检测触发', 'warning')
  }
}

const getAllData = () => {
  const sliders = [
    { name: '基础验证', ref: basicSliderRef.value },
    { name: '完整信息', ref: fullInfoSliderRef.value },
    { name: '渐变样式', ref: gradientSliderRef.value },
    { name: '高级样式', ref: premiumSliderRef.value },
    { name: '简洁样式', ref: cardSliderRef.value },
    { name: '装饰样式', ref: decoratedSliderRef.value }
  ]
  
  sliders.forEach(({ name, ref }) => {
    if (ref) {
      const data = {
        progress: ref.getCurrentProgress?.() || 0,
        verified: ref.isVerified?.() || false,
        retryCount: ref.getRetryCount?.() || 0,
        botDetected: ref.isBotDetected?.() || false
      }
      addLog(name, `数据: ${JSON.stringify(data)}`, 'info')
    }
  })
}

const clearLogs = () => {
  logs.value = []
  addLog('系统', '日志已清空', 'info')
}

// 初始化日志
addLog('系统', '滑块验证演示页面加载完成', 'success')
</script>

<style scoped lang="scss">
.demo-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.demo-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  
  h1 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 2.5em;
    font-weight: 700;
  }
  
  p {
    color: #7f8c8d;
    font-size: 1.1em;
    margin: 0;
  }
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.demo-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }
  
  h3 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
  }
}

// 验证头部样式
.verification-header {
  text-align: center;
  margin-bottom: 16px;
  
  h4 {
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
  }
  
  p {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
  }
}

// 自定义图标样式
.icon {
  font-size: 18px;
  font-weight: bold;
  
  &.success-icon { color: #fff; }
  &.dragging-icon { 
    color: #409eff; 
    animation: rotate 1s linear infinite;
  }
  &.disabled-icon { color: #ccc; }
  &.default-icon { color: #909399; }
}

// 进度指示器样式
.progress-indicator {
  .progress-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
  }
  
  .success-text {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
  }
}

// 底部信息样式
.verification-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 8px;
  
  .status-info {
    display: flex;
    align-items: center;
    gap: 6px;
    
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      
      &.success { background: #67c23a; }
      &.warning { background: #e6a23c; }
      &.dragging { background: #409eff; }
      &.normal { background: #909399; }
    }
    
    .status-text {
      color: #666;
      font-weight: 500;
    }
  }
  
  .stats-info {
    display: flex;
    gap: 12px;
    color: #999;
  }
}

// 帮助信息样式
.help-section {
  .help-warning,
  .help-success,
  .help-normal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-top: 8px;
    
    .help-icon {
      font-size: 16px;
      margin-top: 2px;
    }
    
    .help-content {
      flex: 1;
      
      strong {
        display: block;
        margin-bottom: 2px;
      }
      
      p {
        margin: 0;
        opacity: 0.8;
      }
    }
  }
  
  .help-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
  }
  
  .help-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
  }
  
  .help-normal {
    background: #e2e3e5;
    border: 1px solid #d6d8db;
    color: #383d41;
  }
}

// 渐变警告样式
.gradient-warning {
  display: flex;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, #ff4757, #ff3838);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
  
  .warning-icon {
    margin-right: 12px;
    font-size: 24px;
  }
  
  .warning-content {
    flex: 1;
    
    .warning-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .warning-detail p {
      margin: 4px 0;
      font-size: 14px;
      opacity: 0.9;
    }
  }
}

// 高级警告样式
.premium-warning {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
  
  .warning-animation {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    
    .pulse-circle {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      animation: pulse 2s infinite;
    }
    
    .warning-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      z-index: 1;
    }
  }
  
  .warning-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  
  .warning-details {
    margin-bottom: 12px;
    
    .detail-row {
      display: flex;
      justify-content: space-between;
      margin: 4px 0;
      font-size: 14px;
      
      .label {
        opacity: 0.9;
      }
      
      .value {
        font-weight: 600;
      }
    }
  }
  
  .warning-tip {
    margin-bottom: 16px;
    opacity: 0.8;
  }
  
  .warning-progress {
    .progress-track {
      height: 4px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #ff6b6b, #feca57);
        border-radius: 2px;
        transition: width 0.3s ease;
      }
    }
  }
}

// 卡片警告样式
.card-warning {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ff4757;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 12px rgba(255, 71, 87, 0.15);
  
  .warning-left {
    margin-right: 12px;
    
    .warning-icon {
      width: 40px;
      height: 40px;
      background: #fff5f5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
  }
  
  .warning-right {
    flex: 1;
    
    .warning-title {
      font-size: 14px;
      font-weight: 600;
      color: #ff4757;
      margin-bottom: 4px;
    }
    
    .warning-desc {
      font-size: 13px;
      color: #666;
      margin-bottom: 4px;
    }
    
    .warning-meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: #999;
    }
  }
}

// 轨道装饰样式
.track-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  
  .decoration-dots {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 8px;
    gap: 4px;
    
    .decoration-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transition: all 0.3s ease;
      
      &.active {
        background: rgba(255, 255, 255, 0.8);
        transform: scale(1.5);
      }
    }
  }
}

.track-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  
  .marker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .marker-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transition: all 0.3s ease;
    }
    
    .marker-label {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 2px;
    }
    
    &.active {
      .marker-dot {
        background: rgba(255, 255, 255, 0.9);
        transform: scale(1.3);
      }
      
      .marker-label {
        color: rgba(255, 255, 255, 1);
        font-weight: 600;
      }
    }
    
    &.completed {
      .marker-dot {
        background: #fff;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
      }
    }
  }
}

// 装饰头部样式
.decorated-header {
  text-align: center;
  margin-bottom: 16px;
  
  .header-title {
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  .header-subtitle {
    color: #7f8c8d;
    font-size: 12px;
  }
}

// 装饰进度样式
.decorated-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  
  .progress-waves {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    
    .wave {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      animation: wave 2s infinite linear;
    }
  }
  
  .progress-text {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    
    .success-emoji {
      font-size: 16px;
    }
  }
}

// 自定义图标样式
.custom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  
  .icon-success {
    color: #fff;
    font-size: 16px;
  }
  
  .icon-dragging {
    color: #409eff;
    font-size: 16px;
    animation: rotate 1s linear infinite;
  }
  
  .icon-default {
    color: #909399;
    font-size: 16px;
  }
}

// 自定义文字样式
.custom-text {
  color: #666;
  font-size: 14px;
}

.custom-success {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

// 控制面板样式
.control-panel {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  
  h3 {
    color: #2c3e50;
    margin-bottom: 16px;
    font-size: 1.3em;
    font-weight: 600;
  }
  
  .control-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    &.btn-primary {
      background: #007bff;
      color: white;
    }
    
    &.btn-warning {
      background: #ffc107;
      color: #212529;
    }
    
    &.btn-info {
      background: #17a2b8;
      color: white;
    }
    
    &.btn-secondary {
      background: #6c757d;
      color: white;
    }
  }
}

// 日志面板样式
.log-panel {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  
  h3 {
    color: #2c3e50;
    margin-bottom: 16px;
    font-size: 1.3em;
    font-weight: 600;
  }
  
  .log-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #f8f9fa;
    
    .log-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid #e9ecef;
      font-size: 13px;
      font-family: 'Courier New', monospace;
      
      &:last-child {
        border-bottom: none;
      }
      
      .log-time {
        color: #6c757d;
        font-weight: 600;
        min-width: 60px;
      }
      
      .log-source {
        color: #495057;
        font-weight: 600;
        min-width: 80px;
      }
      
      .log-message {
        flex: 1;
        color: #212529;
      }
      
      &.success {
        background: #d4edda;
        border-color: #c3e6cb;
        
        .log-message {
          color: #155724;
        }
      }
      
      &.error {
        background: #f8d7da;
        border-color: #f5c6cb;
        
        .log-message {
          color: #721c24;
        }
      }
      
      &.warning {
        background: #fff3cd;
        border-color: #ffeaa7;
        
        .log-message {
          color: #856404;
        }
      }
      
      &.info {
        background: #d1ecf1;
        border-color: #bee5eb;
        
        .log-message {
          color: #0c5460;
        }
      }
    }
    
    .log-empty {
      padding: 20px;
      text-align: center;
      color: #6c757d;
      font-style: italic;
    }
  }
}

// 动画
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes wave {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .demo-page {
    padding: 16px;
  }
  
  .demo-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .demo-section {
    padding: 16px;
  }
  
  .control-buttons {
    .btn {
      flex: 1;
      min-width: 120px;
    }
  }
  
  .verification-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style> 